<template>
  <el-row id="cpts-power-monitor">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>
    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>数据监测</span>
        <!--<el-button :disabled="!isViewEdit" style="float: right; padding: 6px 6px;" type="primary" @click="handlerSetting">配置<i class="el-icon-plus el-icon&#45;&#45;right"></i></el-button>-->
      </div>

      <!--条件栏-->
      <el-row>
        <span>监测参数:</span>
        <el-select v-model="powerMonitorValue" placeholder="请选择">
          <el-option
            v-for="item in powerMonitorOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-date-picker
          :type="pickerType"
          :value-format="dateFormat"
          @change="onPickerChange"
          v-model="selectDate"
          placeholder="选择日期时间">
        </el-date-picker>

        <el-button :disabled="!isViewEdit" @click="submitSelect" type="primary">确定</el-button>
      </el-row>

      <!--图表栏-->
      <el-row class="chart-layout">
        <BaseEchartsComponent ref="cptsPowerMonitorLineChart" :id="'cpts_powermonitorlinechart'" :data="lineChartsOptions" :time="chartTime" />
      </el-row>
    </el-card>

    <!--配置弹窗-->
    <el-dialog :visible.sync="configDialogShow">
      <el-row slot="title" type="flex">
        <span style="font-size: 18px">变量点配置</span>
        <el-button  style="margin-left: 1180px; padding: 6px 10px" type="primary" :loading="false">提交</el-button>
      </el-row>

      <el-row class="config-dialog-content">
        <el-row>
          <el-table
            ref="multipleTable"
            :data="tableDatas"
            max-height="560"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="tagName"
              label="变量名">
            </el-table-column>
            <el-table-column
              prop="markName"
              label="备注名">
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
    </el-dialog>
  </el-row>
</template>

<script>
  import {DateTime} from '../../utils/dateTime'
  import BaseEchartsComponent from "../BaseEcharts/index";
  import myEchartsOptions from '../../chart-options/echartsOptions'
    export default {
        name: "powerMonitor",
      components: {BaseEchartsComponent},
      data(){
        return {
          isViewShow: false,
          isViewEdit: false,
          configDialogShow: false,
          powerMonitorValue: '',
          pickerType: 'date',
          dateFormat: 'yyyy-MM-dd',
          selectDate: new DateTime().getDate2(),
          powerMonitorOptions:[],
          chartTime: '',
          lineChartsOptions: this.validateGlobal.cloneObject(myEchartsOptions.lineChartsOption),
          tableDatas:[],
        }
      },
      created(){
        this.askTags()
      },
      mounted(){
        let obj = this.validateGlobal.getPermission(10)
        this.isViewShow = obj.isViewShow
        this.isViewEdit = obj.isViewEdit

        this.lineChartsOptions.xAxis[0].data = []
        this.lineChartsOptions.series[0].data = []
        this.lineChartsOptions.xAxis[0].axisLine.lineStyle.color = '#000'
        this.lineChartsOptions.yAxis[0].axisLine.lineStyle.color = '#000'
        this.lineChartsOptions.grid.left = 60
        this.lineChartsOptions.grid.right = 60
        this.lineChartsOptions.title.text = '单位'
      },
      methods:{
        onPickerChange: function(date) {
          this.selectDate = date
        },
        submitSelect: function(){
          this.askMonitorList()
        },
        handlerSetting: function() {
          if (this.configDialogShow) {
            this.configDialogShow = false
          }else{
            this.configDialogShow = true
          }
        },
        askTags: async function() {     // 获取采集变量的数据
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let gateway = sessionStorage.getItem("gateway")
          let url = _that.ports.collectManage.collectBaseData.tagList
          let askData = {
            search: _that.searchStr,
            isCumulative: _that.isCumulative,
            userId: userId,
            current: 1,
            size: 1000,
            sn:gateway,
          }
          let promise = this.http.getAwait(url,askData)
          await promise.then(res=>{
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              if (res.data.records) {
                let arry = []
                for (let i = 0; i < res.data.records.length; ++i) {
                  arry.push({label:res.data.records[i].tagName,value:res.data.records[i].id})
                }
                _that.powerMonitorOptions = arry
                _that.powerMonitorValue = arry[0].value
              }
            }
          })
          this.askMonitorList()
        },

        askMonitorList: function() {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.powerManage.monitorList
          let askData = {
            userId: userId,
            attributeInfoId: _that.powerMonitorValue,
            time: _that.selectDate,
          }
          this.http.get(url,askData,res=>{
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.lineChartsOptions.xAxis[0].data = res.data.times
              _that.lineChartsOptions.series[0].data = res.data.values
              _that.$nextTick(()=>{
                _that.$refs.cptsPowerMonitorLineChart.drawLineGraph('cpts_powermonitorlinechart',_that.lineChartsOptions)
                _that.chartTime = new Date()
              })
            }
          })
        }
      }
    }
</script>

<style lang="scss">
  #cpts-power-monitor{

    .el-card{
      margin: 20px 20px 0 20px;
      height: 770px;
    }
    .el-card__body{
      overflow:auto;
    }

    .evc-dialog-itemize{
      > :first-child.el-row{
        margin-top: 10px;
        margin-bottom: 20px;
      }
    }

    .evc-submit-layout{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .chart-layout{
      margin-top: 20px;
    }

    #cpts_powermonitorlinechart{
      height: 580px;
    }

     .el-dialog{
      width: 1400px;
      height: 680px;
     }

  }
</style>
